<template>
  <div class="aaa" :class="tdClass" :style="{backgroundColor: dataRow.colorBg ? 'rgba(255, 247, 227, 0.5)' : ''}">
    <table>
      <thead v-if="dataRow.headerGroup">
        <tr style="border-bottom: 1px solid rgb(247, 216, 150)">
          <th>
            <el-button type="text" @click="removeDataInit(dataRow)">删除该数据结构</el-button>
            <el-button type="text" @click="handelClickDisassociate(dataRow)">取消该数据结构的关联</el-button>
          </th>
        </tr>
      </thead>
      <tbody>
      <tr>
        <td>
          <table>
            <tr @click="handelClickRowEdit(dataRow)">
              <td class="td1" :style="{paddingLeft: dataRow.pleft + 'px'}">
                <span class="expandIconAll" v-if="dataRow.children.length > 0" @click.stop="handlerExpand(dataRow)">
                  <i class="el-icon-circle-plus-outline" v-if="!dataRow.isExpand"></i>
                  <i class="el-icon-remove-outline" v-if="dataRow.isExpand"></i>
                </span>
                <span>
                  <span v-if="!dataRow.editRow" class="expandSize">{{dataRow.parameterName}}</span>
                  <el-input size="small" v-else v-model="dataRow.parameterName" placeholder="请输入姓名" :disabled="dataRow.allDataIdent ? true : false"></el-input>
                </span>
              </td>
              <td class="td2">
                <span>
                  <span v-if="!dataRow.editRow">{{dataRow.type}}</span>
                  <el-select v-else size="small" v-model="dataRow.type" placeholder="请选择">
                    <el-option
                      v-for="item in optionsType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </span>
              </td>
              <td class="td3">
                <span>
                  <span v-if="!dataRow.editRow">{{dataRow.required ? '是' : '否'}}</span>
                  <el-checkbox size="small" v-else v-model="dataRow.required"></el-checkbox>
                </span>
              </td>
              <td class="td4">
                <span>
                  <span v-if="!dataRow.editRow">{{dataRow.example}}</span>
                  <el-input size="small" v-else v-model="dataRow.example" placeholder="请输入年龄"></el-input>
                </span>
              </td>
              <td class="td5">
                <span>
                  <span v-if="!dataRow.editRow">{{dataRow.explain}}</span>
                  <el-input size="small" v-else v-model="dataRow.explain" placeholder="请输入年龄"></el-input>
                </span>
              </td>
              <td class="td6">
                <span>
                  <span v-if="!dataRow.editRow">{{dataRow.limit}}</span>
                  <el-input size="small" v-else v-model="dataRow.limit" placeholder="请输入年龄"></el-input>
                </span>
              </td>
              <td class="td7">
                <div>
                  <el-button type="text" v-if="!dataRow.allDataIdent && tableBtn.insert" @click.stop="addRow(dataRow)">插入</el-button>
                  <el-button type="text" v-if="!dataRow.allDataIdent && tableBtn.addSubfield" @click.stop="addRowChildren(dataRow)">添加子字段</el-button>
                  <el-button type="text" v-if="!dataRow.allDataIdent && tableBtn.insertDataStructure" @click.stop="insertDataStructure(dataRow)">插入现有数据结构</el-button>
                  <el-button type="text" v-if="!dataRow.allDataIdent && tableBtn.delete && tableLength > 1" @click.stop="removeNode(dataRow)">删除</el-button>
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="other-node" v-show="dataRow.isExpand">
      <tree-item v-for="(val, index) of dataRow.children"
         :dataRow="val"
         :key="index"
         :tableBtn="tableBtn"
         :tableLength="tableLength"
         @handlerExpand="handlerExpand"
         @handelClickRowEdit="handelClickRowEdit"
         @removeNode="removeNode"
         @addRow="addRow"
         @addRowChildren="addRowChildren"
         @insertDataStructure="insertDataStructure"
         @removeDataInit="removeDataInit"
         @handelClickDisassociate="handelClickDisassociate"
         :root="1">
      </tree-item>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'treeItem',
    props: ['dataRow', 'root', 'tableNum', 'tableBtn', 'tableLength'],
    data() {
      return {
        optionsType: [
          {
            value: 'string',
            label: '[string]'
          }, {
            value: 'array',
            label: '[array]'
          }, {
            value: 'object',
            label: '[object]'
          }, {
            value: 'int',
            label: '[int]'
          }
        ]
      }
    },
    computed: {
      tdClass() {
        return this.root === 0 ? 'td-border' : 'not-border'
      }
    },
    methods: {
      handlerExpand(row) {
        this.$emit('handlerExpand', row)
      },
      handelClickRowEdit(row) {
        this.$emit('handelClickRowEdit', row)
      },
      removeNode(row) {
        this.$emit('removeNode', row)
      },
      addRow(row) {
        this.$emit('addRow', row)
      },
      addRowChildren(row) {
        this.$emit('addRowChildren', row)
      },
      insertDataStructure(row) {
        this.$emit('insertDataStructure', row)
      },
      removeDataInit(row) {
        this.$emit('removeDataInit', row)
      },
      handelClickDisassociate(row) {
        this.$emit('handelClickDisassociate', row)
      }
    }
  }
</script>

<style>
.td1{
  box-sizing: border-box;
}
</style>
